<template>
	<view class="mybox1">
		<view class="user">
			<view class="txbox" @click="gengai">
				<image :src="$store.state.user.faceUrl?$store.state.user.faceUrl:''" class="img1" mode="aspectFill"></image>
				<view>
					<view class="name1" @click="gengai">{{$store.state.user.nickName ? $store.state.user.nickName : ($store.state.user.username ? $store.state.user.username:'未登录')}}</view>
					<view class="gxqm">
						<view>点击修改信息</view>
						<view class="cuIcon-triangleupfill"></view>
					</view>
				</view>
			</view>
			<view class="right">
				<button size="mini" class="button1" @click="login">用户登录</button>
			</view>
		</view>
		<view class="wdxx">
			<view class="wdtit">
				<image src="../../static/images/hylogo.png"></image>
				<view>考词霸•会员</view>
			</view>
			<view class="wdbody">
				<view class="p1">开启会员领取专属福利</view>
				<view class="but1" @click="huiyuan">开通会员</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"myMessage",
		props:['user1'],
		data() {
			return {
				user:this.user1
			};
		},
		
		methods:{
			huiyuan(){
				uni.navigateTo({
						url:'../../pages/huiyuan/huiyuan'
					})
			},
			gengai(){
				uni.navigateTo({
					url:'/pages/XGxingxi/XGxingxi'
				})
			},
			login(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
		}
	}
</script>

<style scoped>
	.mybox1{
		background: url(../../static/images/mybg.png);
		background-size: 100%;
		background-repeat: no-repeat;
		padding-top: 10vh;
	}
	.user {
		position: relative;
		box-sizing: border-box;
		/* background-color: #FFFFFF; */
		border-radius: 5px;
		display: flex;
		margin: 0px 15px;
		padding: 0px 10px 10px 10px;
	}
	.txbox{
		display: flex;
	}
	.img1 {
		border: 1px solid #FFFFFF;
		background-color: #F2F3F3;
		background-image: url(../../static/images/yh.png);
		background-repeat: no-repeat;
		background-size: 90%;
		background-position: center;
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}
	
	.name1 {
		margin: 5px 10px;
		font-size: 18px;
		font-weight: 600;
		color: #fff;
	}
	.gxqm{
		align-items: center;
		border-radius: 210px;
		padding: 2px 8px;
		font-size: 12px;
		color: #333;
		background-color: #F5F5F5;
		display: flex;
		justify-content: center;
		margin-left: 10px;
	}
	.button1{
		background-color: #3F9D83;
		color: #FFFFFF;
		border: 1px solid #fff;
	}
	.right{
		position: absolute;
		right: 10px;
	}
	.wdxx{
		margin: 15px 15px;
		padding: 15px;
		background-color: #2E1F0B;
		border-radius: 15px;
	}
	.wdtit{
		display: flex;
		align-items: center;
		font-size: 14px;
		letter-spacing: 1px;
		color: #EFE1C4;
		margin-bottom: 10px;
	}
	.wdtit image{
		width: 16px;
		height: 16px;
		margin-right: 5px;
	}
	.wdbody{
		font-size: 12px;
		color: #E5D9BE;
		justify-content: space-between;
		align-items: center;
		display: flex;
	}
	.wdbody image{
		width: 50px;
		height: 50px;
	}
	.p1{
		
	}
	.wdbody .but1{
		padding: 5px 15px;
		color: #2E1F0B;
		background-color: #E5D9BE;
		border-radius: 8px;
	}
	.cuIcon-triangleupfill{
		font-size: 16px;
		transform: rotateZ(90deg);
	}
</style>
